<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>登录|收藏家-URL管理工具</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <meta name="format-detection" content="telephone=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <link rel="alternate icon" type="image/png" href="assets/i/favicon.png">
  <link rel="stylesheet" href="__CDN__/css/amazeui.min.css"/>
  <style>
    .header {
      text-align: center;
    }
    .header h1 {
      font-size: 200%;
      color: #333;
      margin-top: 30px;
    }
    .header p {
      font-size: 14px;
    }


  </style>
</head>
<body>

<div class="header">
  <div class="am-g">
    <h1>Collector</h1>
    <p>URL management tool<br/>收藏家，URL管理工具，多端同步，便携管理</p>
  </div>
  <hr />
</div>
<div class="am-g">
  <div class="am-u-lg-6 am-u-md-8 am-u-sm-centered">

    <hr>

    <form id="doc-vld-tooltip" method="post" class="am-form" action="/api/login/maillogin">
      <fieldset>
      <div class="am-form-group">
        <label for="doc-vld-email-2-1">邮箱：</label>
        <input type="email" id="doc-vld-email-2-1" data-foolish-message="自定义提示信息：输入地球上的电子邮箱撒" placeholder="输入邮箱" required/>
      </div>
      <!--<label for="email">邮箱:</label>-->
      <!--<input type="email" name="" id="email" value="" placeholder="输入电子邮件">-->
        <div class="am-form-group">
          <label for="doc-vld-pwd-1-0">密码：</label>
          <input type="password" id="doc-vld-pwd-1-0" placeholder="6 位数字的银行卡密码" pattern="^\d{6}$" required data-foolish-msg="把 IQ 卡密码交出来！"/>
        </div>
      <!--<br>-->
         <!--<label for="doc-vld-password-2-1">密码:</label>-->
         <!--<input type="password" name="" minlength="6" id="doc-vld-password-2-1" value="" laceholder="输入密码（至少 6个字符）" required>-->
      <!--<br>-->
      <!--<label for="remember-me">-->
        <!--<input id="remember-me" type="checkbox">-->
        <!--记住密码-->
      <!--</label>-->
      <br />
        </fieldset>
    </form>
    <div class="am-cf">
    <input type="submit" name="" value="登 录" class="am-btn am-btn-primary am-round am-btn-block btn-loading-example" data-am-loading="{loadingText: '努力加载中...'}"><br>
    <input type="submit" name="" value="注 册 " class="am-btn am-btn-success am-btn-sm am-round am-btn-block" onclick="javascript:window.location.href='register'"><br>
    <input type="submit" name="" value="忘记密码 ^_^? " class="am-btn am-btn-secondary am-btn-xs am-fr am-round" onclick="javascript:window.location.href='forget'">
    </div>
    <hr>
    <p>Copyright 2018 版权所有:鱼笨自由</p>
  </div>
</div>

<style>
  #vld-tooltip {
    position: absolute;
    z-index: 1000;
    padding: 5px 10px;
    background: #F37B1D;
    min-width: 150px;
    color: #fff;
    transition: all 0.15s;
    box-shadow: 0 0 5px rgba(0,0,0,.15);
    display: none;
  }

  #vld-tooltip:before {
    position: absolute;
    top: -8px;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -8px;
    content: "";
    border-width: 0 8px 8px;
    border-color: transparent transparent #F37B1D;
    border-style: none inset solid;
  }
</style>

<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="__CDN__/js/jquery.min.js"></script>
<!--<![endif]-->
<script src="__CDN__/js/amazeui.min.js"></script>


<script>
    $(function() {
        var $form = $('#form-with-tooltip');
        var $tooltip = $('<div id="vld-tooltip">提示信息！</div>');
        $tooltip.appendTo(document.body);

        $form.validator();

        var validator = $form.data('amui.validator');

        $form.on('focusin focusout', '.am-form-error input', function(e) {
            if (e.type === 'focusin') {
                var $this = $(this);
                var offset = $this.offset();
                var msg = $this.data('foolishMsg') || validator.getValidationMessage($this.data('validity'));

                $tooltip.text(msg).show().css({
                    left: offset.left + 10,
                    top: offset.top + $(this).outerHeight() + 10
                });
            } else {
                $tooltip.hide();
            }
        });
    });


    $('.btn-loading-example').click(function () {
        var $btn = $(this)
        $btn.button('loading');


        setTimeout(function(){
            $btn.button('reset');
        }, 5000);
    });

</script>
</body>
</html>
